<template>
    <div class="service_contract">
      <div class="flex top">
        <div class="flex-1">
          <img class="w-100 h-100" src="../../assets/images/risk.jpg" alt="百融风控" />
        </div>
        <div class="right">
          <p class="flex flex-between align-center">
            <span style="font-size: 20px">协议公证</span>
            <span class="blue-font pointer" @click="checkRecords">充值记录</span>
          </p>
          <p class="flex flex-between align-center" style="margin: 15px 0 10px">
            <span class="color-666">协议公证余额</span>
            <span class="color-666"> {{ shop_lease_balance }} 元</span>
          </p>
          <el-button class="w-100" type="primary" style="font-size: 18px" @click="goToRecharge(1)">去充值</el-button>
          <el-divider></el-divider>
          <p class="flex flex-between align-center">
            <span class="color-666">自动充值（{{
            risk_radar_automatic == 1 ? "已开启" : "未开启"
            }}）</span>
            <span class="blue-font pointer" @click="autoRecharge">{{
            risk_radar_automatic == 1 ? "关闭" : "开启"
            }}</span>
          </p>
          <el-tag class="w-100 text-center" type="warning">开启自动充值避免公证余额不足</el-tag>
        </div>
      </div>
      <h5 class="record_header">协议公证记录</h5>
      <div class="common_form_search">
        <el-form ref="searchForm" :inline="true" :model="searchForm">
          <el-form-item label="订单编号">
            <el-input style="width: 230px" v-model="searchForm.order_id" placeholder="请输入订单编号" clearable></el-input>
          </el-form-item>
          <el-form-item label="用户姓名">
            <el-input v-model="searchForm.user_name" placeholder="请输入用户姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="searchForm.user_mobile" placeholder="请输入手机号" clearable></el-input>
          </el-form-item>
          <el-form-item label="查询时间">
            <my-date-picker ref="myDatePicker"></my-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="search()">查询</el-button>
            <el-button size="small" @click="reset()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData" border>
        <el-table-column align="center" prop="id" label="ID" width="100" />
        <el-table-column align="center" prop="create_time" label="创建时间" width="100" />
        <el-table-column align="center" prop="trade_no" label="订单号" />
        <el-table-column align="center" prop="after_balance" label="操作前余额" />
        <el-table-column align="center" prop="before_balance" label="操作后余额" />
        <el-table-column align="center" prop="amount" label="操作金额" />
        <el-table-column align="center" prop="service_fee" label="手续费" />
        <el-table-column align="center" prop="remarks" label="备注" />
        <el-table-column align="center" label="操作类型">
          <template slot-scope="scope">
            <span>{{scope.row.trans_type==1?'结算':scope.row.trans_type==2?'退款':scope.row.trans_type==3?'充值':scope.row.trans_type==4?'买断':scope.row.trans_type==6?'提现':scope.row.trans_type==7?'增值服务业务充值':scope.row.trans_type==8?'购买合同':'其他业务'}}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- <radar ref="radarDialog" :edit-item="editItem" @getList="getList" @resp-code="respCode"></radar> -->
      <!-- <buy-dialog ref="buyDialog" dialog-title="雷达报告余额购买" @getList="getList" :type="6"></buy-dialog> -->
      <recharge-dialog ref="rechargeDialog" dialog-title="协议公证自动充值" @getList="getList" :type="6"></recharge-dialog>
      <custom-page ref="customPage" :total="total" @getList="getList"></custom-page>
    </div>
  </template>
  
  <script>
  import {
    withdrawalLeaseList
  } from '@/api/marketing'
  import {
    myAccount
  } from '@/api/account'
  import customPage from '@/components/customPage'
  import myDatePicker from '@/components/myDatePicker'
  import buyDialog from './components/buy'
  import rechargeDialog from './components/recharge'
  export default {
    components: { customPage, myDatePicker, buyDialog, rechargeDialog },
    data() {
      return {
        tableData: [],
        total: 0,
        searchForm: {
          order_id: '',
          user_name: '',
          user_mobile: '',
          create_time: ''
        },
        risk_radar_automatic: 0,
        risk_radar_amount: 0,
        disabled: false,
        editItem:{},
        shop_lease_balance:''
      }
    },
    methods: {
      checkUrl(url) {
        if (url) {
          window.open(url)
        } else {
          this.$message.warning('暂无法查看报告')
          return
        }
      },
      // 自动充值
      autoRecharge() {
        if (!this.showTip()) {
          return
        }
        if (this.risk_radar_automatic === 1) {
          // 关闭
          this.$confirm('确认要关闭自动充值吗?', '关闭自动充值', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          })
            .then(() => {
              riskRadarCreditAutoRecharge().then((res) => {
                this.getList()
              })
            })
            .catch(() => { })
        } else {
          // 开启
          this.$refs.rechargeDialog.dialogVisible = true
        }
      },
      // 去购买
      goToRecharge(e) {
      let routeData = this.$router.resolve({
        name: 'recharge',
        query:{id:e}
      })
      window.open(routeData.href, '_blank')
    },
      // 查看合同购买记录
      checkRecords() {
        if (!this.showTip()) {
          return
        }
        this.$router.push({ name: "serviceNotarizationRecord" })
      },
      // 查询
      search() {
        if (!this.showTip()) {
          return
        }
        const pickerVal = this.$refs.myDatePicker.getVal()
        if (pickerVal !== 'error') {
          this.searchForm.create_time = pickerVal
          this.$refs.customPage.page = 1
          this.getList()
        }
      },
      // 重置
      reset() {
        if (!this.showTip()) {
          return
        }
        if (this.$refs.myDatePicker) {
          this.$refs.myDatePicker.reset()
        }
        this.searchForm = {
          order_id: '',
          user_name: '',
          user_mobile: '',
          create_time: ''
        }
        this.getList()
      },
      // 获取数据
      getList() {
        const { page, pageSize } = this.$refs.customPage;
        withdrawalLeaseList({
          page,
          pageSize,
          ...this.searchForm
        }).then((res) => {
          console.log(res.data);
          const { data, risk_radar_automatic, risk_radar_amount } = res
          this.tableData = res.data || []
          this.total = res.data.length || 0
          this.risk_radar_automatic = risk_radar_automatic
          this.risk_radar_amount = risk_radar_amount
        });
        
      },
      goToOrder(orderId) {
        if (orderId) {
          this.$router.push({ name: 'orderList', params: { orderId } })
        }
      },
      getData() {
        withdrawalLeaseList().then((res) => {
            this.disabled = false
            this.getList()
          })
          .catch((err) => {
            //   this.disabled = true;
          });
          myAccount().then(res=>{
            this.shop_lease_balance=res.shop_lease_balance
          })
      },
      showTip() {
        if (this.disabled) {
          this.$message({
            message: '该店铺暂未开启协议公证, 请先开启后再查看该功能',
            type: "error"
          });
          return false
        }
        return true
      },
    },
    mounted() {
      this.getData()
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .top {
    height: 300px;
  
    .el-divider--horizontal {
      margin: 20px 0;
    }
  }
  
  .right {
    width: 345px;
    margin-left: 20px;
    padding: 20px;
    border: 1px solid #e6e6e6;
  
    p {
      line-height: 32px;
    }
  
    span {
      font-size: 16px;
    }
  
    .el-tag {
      color: #ff8500;
      margin-top: 10px;
      font-size: 14px;
    }
  }
  
  .record_header {
    padding-left: 15px;
    border-left: 3px solid $mainBlue;
    margin: 20px 0;
  }
  </style>
  